<template>
	<view class="pickup-container page-container-with-bottom-btn">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">🚚 自行寄件</text>
			<text class="page-subtitle">自行联系快递寄回，需填写快递单号</text>
		</view>

		<!-- 售后信息 -->
		<view class="after-sale-info-card">
			<view class="card-title">售后信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">售后单号</text>
					<text class="info-value">{{ afterSaleInfo.after_sale_sn }}</text>
				</view>
				<view v-for="(product, index) in afterSaleInfo.sku_info" :key="product.id" class="info-item">
					<text class="info-label">商品 {{product.quantity}} 件</text>
					<text class="info-value">{{ product.spu_name }} / {{ product.sku_name }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">售后类型</text>
					<text class="info-value">{{ getTypeTitle(afterSaleInfo.after_sale_type) }}</text>
				</view>
			</view>
		</view>

		<!-- 退货地址 -->
		<view class="pickup-address-card">
			<view class="card-title">
				<text class="title-text">退货地址</text>
			</view>
			<view class="address-info">
				<view class="address-main">
					<text class="address-name">{{ afterSaleInfo.return_name }}</text>
					<text class="address-phone">{{ afterSaleInfo.return_phone }}</text>
				</view>
				<text class="address-detail">{{ afterSaleInfo.return_pcs+' '+afterSaleInfo.return_address }}</text>
			</view>
		</view>

		<!-- 选择物流 -->
		<view class="form-section">
			<view class="section-title">选择物流</view>
			<view class="filter-options">
				<view class="filter-option" v-for="(option, index) in logisticsOptions" :key="index"
					:class="{ active: selectedLogistics === index }" @click="selectLogistics(index)">
					<text class="option-text">{{ option.lc_name }}</text>
				</view>
			</view>
		</view>
		<view class="contact-info-card">
			<view class="card-title">
				<text class="title-text">快递单号</text>
				<text class="change-btn" @click="scanTrackingNo">扫码</text>
			</view>
			<view class="contact-form">
				<view class="form-item">
					<input class="form-input" placeholder="请扫描快递单号" v-model="afterSaleInfo.return_tracking_no" />
				</view>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-info-card">
			<view class="card-title">联系方式</view>
			<view class="contact-form">
				<view class="form-item">
					<text class="form-label">联系人</text>
					<input class="form-input" placeholder="请输入联系人姓名" v-model="afterSaleInfo.contactName" />
				</view>
				<view class="form-item">
					<text class="form-label">联系电话</text>
					<input class="form-input" placeholder="请输入联系电话" v-model="afterSaleInfo.contactPhone"
						type="number" />
				</view>
			</view>
		</view>

		<!-- 确认按钮 -->
		<view class="confirm-section">
			<button class="confirm-btn" :disabled="!canConfirm" @click="confirmPickup">
				确认提交
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				afterSaleId: '',
				afterSaleInfo: {},
				logisticsOptions: [],
				selectedLogistics: -1
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),

			canConfirm() {
				return this.selectedLogistics >= 0 &&
					this.afterSaleInfo.return_tracking_no !== '' &&
					this.afterSaleInfo.contactName !== '' &&
					this.afterSaleInfo.contactPhone.length === 11
			}
		},
		onLoad(options) {
			if (options.afterSaleId) {
				this.afterSaleId = options.afterSaleId
				this.loadAfterSaleInfo()
			}
			this.loadLogisticsCompany();
		},
		methods: {
			// 加载售后信息
			loadAfterSaleInfo() {
				this.$api.order.GetAfterSalesInfo({
					id: this.afterSaleId
				}).then(res => {
					res.data.sku_info = this.$tools.parseJsonObject(res.data.sku_info)
					res.data.evidence = this.$tools.parseJsonObject(res.data.evidence)
					const province = this.$tools.parseJsonObject(res.data.return_province)
					const city = this.$tools.parseJsonObject(res.data.return_city)
					const town = this.$tools.parseJsonObject(res.data.return_town)
					if (province && province.name) {
						res.data.return_pcs = province.name + city.name + town.name;
					} else {
						res.data.return_pcs = '';
					}
					this.afterSaleInfo = res.data;

					if (!this.afterSaleInfo.contactName.trim()) {
						this.afterSaleInfo.contactName = !this.userInfo.realname.trim() ? this.userInfo.nickname :
							this.userInfo.realname;
					}
					if (!this.afterSaleInfo.contactPhone.trim()) {
						this.afterSaleInfo.contactPhone = this.$secret.decryptAES(this.userInfo.mobile);
					}
				})
			},

			// 加载物流公司
			loadLogisticsCompany() {
				this.$api.order.GetLogisticsCompany().then(res => {
					this.logisticsOptions = res.data
				})
			},

			// 选择物流公司
			selectLogistics(index) {
				this.selectedLogistics = index
			},

			// 扫码快递单号
			scanTrackingNo() {
				uni.authorize({
					scope: 'scope.camera', // 申请相机权限
					success: () => {
						// 授权成功后调用扫码
						uni.scanCode({
							onlyFromCamera: false,
							scanType: ['qrCode', 'barCode'],
							success: (res) => {
								// console.log('扫码结果:', res);
								if (res.result && res.result != '') {
									this.afterSaleInfo.return_tracking_no = res.result;
								}
							},
							fail: (err) => {
								// console.error('扫码失败:', err);
								uni.showToast({
									title: '扫码失败，请重试',
									icon: 'none'
								})
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: "请授权相机权限"
						});
					}
				});
			},

			// 获取售后类型
			getTypeTitle(type) {
				const titleMap = {
					1: '退货',
					2: '换货',
					3: '仅退款',
					4: '补寄'
				}
				return titleMap[type] || '未知'
			},

			// 确认保存
			confirmPickup() {
				if (!this.canConfirm) {
					uni.showToast({
						title: '请完善预约信息',
						icon: 'none'
					})
					return
				}

				const pickupData = {
					after_sales_id: this.afterSaleId,
					return_method: 1,
					return_type: 1,
					return_tracking_no: this.afterSaleInfo.return_tracking_no,
					return_lc_code: this.logisticsOptions[this.selectedLogistics].lc_code,
					return_lc_name: this.logisticsOptions[this.selectedLogistics].lc_name,
					contactName: this.afterSaleInfo.contactName,
					contactPhone: this.afterSaleInfo.contactPhone
				}

				uni.showLoading({
					title: '提交中...'
				})

				this.$api.order.AfterSalesReturn(pickupData).then(res => {
					uni.hideLoading()
					uni.showModal({
						title: '提交成功',
						content: '已成功上传物流信息',
						showCancel: false,
						success: () => {
							const pages = getCurrentPages()
							const prevPage = pages[pages.length - 2]
							if (prevPage) {
								prevPage.$vm.onSearch()
							}
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pickup-container {
		background-color: #f8f9fa;
	}

	.page-header {
		background-color: #ffffff;
		padding: 40rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 16rpx;
	}

	.page-subtitle {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 卡片通用样式 */
	.after-sale-info-card,
	.pickup-address-card,
	.pickup-time-card,
	.contact-info-card,
	.remark-card,
	.service-note-card {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.change-btn {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: normal;
	}

	/* 信息列表 */
	.info-list {
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* 地址信息 */
	.address-info {
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.address-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.address-name {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.address-phone {
		font-size: 26rpx;
		color: #666;
	}

	.address-detail {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 日期选择 */
	.date-tabs {
		display: flex;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.date-tab {
		flex: 1;
		text-align: center;
		padding: 30rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
	}

	.date-tab.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.date-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.date-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 时间段选择 */
	.time-slot-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.time-slot-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.time-slot-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
	}

	.time-slot-item.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.time-slot-item.disabled {
		opacity: 0.5;
	}

	.slot-time {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.slot-status {
		font-size: 24rpx;
		color: #666;
	}

	.time-slot-item.disabled .slot-status {
		color: #999;
	}

	/* 表单 */
	.contact-form {
		margin-bottom: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		width: 160rpx;
		flex-shrink: 0;
	}

	.form-input {
		flex: 1;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid #e9ecef;
	}

	/* 备注 */
	.remark-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid #e9ecef;
		box-sizing: border-box;
	}

	.char-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
	}

	/* 服务说明 */
	.note-list {
		margin-bottom: 20rpx;
	}

	.note-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.note-icon {
		font-size: 28rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.note-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		flex: 1;
	}

	/* 确认按钮 */
	.confirm-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.confirm-btn {
		width: 100%;
		background-color: #52a58a;
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		padding: 0 32rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.confirm-btn:disabled {
		background-color: #cccccc;
		color: #999999;
	}

	/* 表单区域 */
	.form-section {
		background: white;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	/* 选择物流 */
	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.filter-option {
		padding: 16rpx 24rpx;
		background-color: #f8f9fa;
		border-radius: 40rpx;
		border: 2rpx solid transparent;
	}

	.filter-option.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.option-text {
		font-size: 26rpx;
		color: #666;
	}

	.filter-option.active .option-text {
		color: #52a58a;
		font-weight: 600;
	}

	.reason-options {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.reason-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.reason-item:last-child {
		border-bottom: none;
	}

	.reason-item.active .reason-text {
		color: #52a58a;
		font-weight: bold;
	}

	.reason-text {
		font-size: 28rpx;
		color: #333;
	}

	.reason-radio {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 50%;
		position: relative;
	}

	.reason-radio.checked {
		border-color: #52a58a;
	}

	.reason-radio.checked::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 16rpx;
		height: 16rpx;
		background-color: #52a58a;
		border-radius: 50%;
	}
</style>